$primary-100: #58a4b0; // send req and add workspace buttons, changed this - Jason
$primary-200: #1b1b1e; // clear workspace btn
$primary-300: #21d4bc;
$primary-400: #faa2b4; // fail tests background color
$primary-500: #475168; // responses header

// changed all of this, this is for button near the url in the respective navbar btn
$rest: $primary-100; // get button in http/2
$graphql: $primary-100;
$grpc: $primary-100;
$websockets: $primary-100;
$webrtc: $primary-100;
$openapi: $primary-100;
$webhook: $primary-100;
$webhookOn: $primary-100;

$neutral-100: #888888;
$neutral-200: #f0f6fa; // test snippets and view test button background color
$neutral-300: #e1e1e1; // drop shadow on response box
$neutral-400: #737581;
$neutral-500: #f4f5f7;
$neutral-600: #000000;
$neutral-700: #f3f3f3; // gigi added to set background of 3 main containers

// BULMA COLORS
$primary: $primary-500;
$success: $primary-300;
$danger: $primary-200;
$text: $neutral-400;

.is-primary-100 {
  color: $neutral-500 !important; // this is send and add font color
  background-color: $primary-100 !important; // this changes add to work space button
}

.is-primary-200 {
  color: $neutral-500;
  background-color: $primary-100;
}

.is-rest {
  color: $neutral-200 !important;
  background-color: $rest !important;
}

// test snippet btn on top right
.is-rest-invert {
  color: $primary-500 !important;
  background-color: $neutral-200 !important;
}

.is-graphQL {
  color: $neutral-200 !important;
  background-color: $graphql !important;
}

.is-grpc {
  color: $neutral-200 !important;
  background-color: $grpc !important;
}

.is-webrtc {
  color: $neutral-200 !important;
  background-color: $webrtc !important;
}

.is-openapi {
  color: $neutral-200 !important;
  background-color: $openapi !important;
}
.is-webhook {
  color: $neutral-200 !important;
  background-color: $webhook !important;
}

.is-ws {
  color: $neutral-200 !important;
  background-color: $websockets !important;
}

.is-wh {
  color: $neutral-200 !important;
  background-color: $webhook !important;
}

.is-wh-on {
  color: $neutral-200 !important;
  background-color: $webhookOn !important;
}

.is-rest-color {
  color: $rest !important;
}

.is-graphQL-color {
  color: $graphql !important;
}

.is-grpc-color {
  color: $grpc !important;
}

.is-openapi-color {
  color: $openapi !important;
}

.is-ws-color {
  color: $websockets !important;
}
.is-webrtc-color {
  color: $webrtc !important;
}

.is-rest-border {
  border-color: $rest !important;
}

.is-graphQL-border {
  border-color: $graphql !important;
}

.is-openapi-border {
  border-color: $openapi !important;
}

.is-grpc-border {
  border-color: $grpc !important;
}

.is-ws-border {
  border-color: $websockets !important;
}

.is-webrtc-border {
  border-color: $webrtc !important;
}

// send request, view request detail font and box
.is-neutral-300 {
  color: $neutral-600 !important;
  background-color: $neutral-300 !important;
}

// this one is for the view reponse button
.is-neutral-50 {
  color: #373f51 !important;
  background-color: $neutral-200 !important;
}

//and send in workspace container
.is-neutral-100 {
  color: $neutral-200 !important;
  background-color: $neutral-100 !important;
}

.is-neutral-200-box {
  border: 1px solid black;
  background-color: $neutral-200;
}

.is-success {
  background-color: $primary-300;
  color: $neutral-100;
}

.is-danger {
  background-color: $primary-200;
  color: $neutral-100;
}

.is-border-neutral-300 {
  border: 1px solid $neutral-300;
}

.is-divider-neutral-300 {
  // this is the divider between the tabs -Prince
  border-left: 1px solid $neutral-300;
  border-right: 1px solid $neutral-300;
  background-color: $neutral-700;
}

.is-awesome-icon {
  display: inline-block;
  stroke-width: 0;
  stroke: $neutral-200;
  fill: $neutral-200;
  line-height: 1;
  position: relative;
  top: -0.07em;
  vertical-align: middle;
}

.is-queue-color {
  background: $neutral-200;
  padding-left: 1em;
}

